{include file="public/header"}

{include file="public/style"}       
        <el-breadcrumb separator="/">
             
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>敦煌采集</el-breadcrumb-item>
        </el-breadcrumb>
        <br>
            <el-card >
                <div style="display: flex;align-items: center;justify-content: flex-start;">
                    <el-form :inline="true" :model="searchForm" size="small"  ref="refsearchForm">      
                             
                             
                            <el-button type="primary"  size="small" plain @click="getdhgates" icon="el-icon-search" v-cloak>敦煌采集</el-button>
                 
                      
                      </el-form>                   
               
                </div>                  
                  
                <el-table :data="tablelist"   style="width: 100%;margin-bottom: 20px;"  row-key="id"  border >
                    <el-table-column   type="selection" width="55"></el-table-column>
                    <el-table-column   prop="id" label="ID" width="80"> </el-table-column>
                    <el-table-column   prop="supplier_name" label="供应商" > </el-table-column>  
                    <el-table-column   prop="count" label="采购的数量" ></el-table-column> 
                    <el-table-column   prop="buyer_name" label="采购员" ></el-table-column>   
                    <el-table-column  fixed="right" label="操作" width="220">
                        <template v-slot="{row}">
                            <el-button type="primary"  plain  icon="el-icon-view"  @click="lookUp(row)" >查看 </el-button>
                            <el-button type="danger"  plain  icon="el-icon-delete"  @click="cancel(row)" >取消 </el-button>
                        </template>
                    </el-table-column>
                </el-table>    
                <!-- page -->
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.pagenum" :page-sizes="[20,50,100, 150, 300,500,1000,2000]"
                    :page-size="searchForm.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>  
                        
         
            </el-card> 


<!-- 采集弹窗 -->
            <el-dialog :title="title" v-model="gatherVisible"  width="900px" :close-on-click-modal="false" :visible.sync="dialogVisible" custom-class="scrollable-dialog">

                  <el-dialog
                    width="30%"
                    title="采集内容"
                    :visible.sync="innerVisible"
                    :close-on-click-modal="false" 
                    append-to-body>采集标题：{{dataList}}
                      <el-button type="primary" plain @click="innerVisibles" style="margin-top: 10px;"> 取消</el-button>
                    </el-dialog>

                <el-form :model="gatherForm"  ref="gatheritForm"  >

                    <el-form-item label-width="100px" prop="url" label="敦煌链接" label-position="left" >
                        <el-input v-model="gatherForm.url" placeholder="请输入敦煌链接 ,例如:https://www.dhgate.com/product/hzszhome-artificial-arch-flower-row-diy-wedding/989651799.html"  clearable></el-input>
                    </el-form-item>                 
                <div>                                   
                    <el-form-item>
                        <el-button type="primary" @click="gatheritSubmits">采集</el-button>
                        <el-button type="primary" plain @click="closegather"> 取消</el-button>
                    </el-form-item>
                </div>
                 </el-form>
        </el-dialog>  

          
    </div>

    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {    
                  gatherVisible:false,
                  innerVisible:false,
                  title:'敦煌采集',
                  dataList:[],
                    total:0,   //分页总页数      
                    tablelist:[] ,              
                    searchForm: {                             
                        s_id: '',          
                        pagesize: 20,
                        pagenum: 1, 
                    },   
                    gatherForm:{
                        url:'', 
                    },
                    dialogVisible:false,
                }
            },
            mounted(){        
             
            },
            methods: {        

                async getDatalist() {
                    const res = await axios.post('/admin/purchase/procurement', {params: this.searchForm})
                        if (res.status !== 1) {
                            return this.$message.error(res.info);
                        }
                    this.total = res.info.total
                    this.tablelist = res.info.list
                },
                    
                handleSizeChange(newSize) {
                    this.searchForm.pagesize = newSize
                    this.getDatalist()
                },
                handleCurrentChange(newPage) {
                    this.searchForm.pagenum = newPage
                    this.getDatalist()
                },              
                getSearch() {
                    this.searchForm.pagenum = 1
                    this.getDatalist()
                },    
                
                getdhgates(){
                     this.gatherForm.url='';
                    this.dialogVisible = true,
                    this.title = '敦煌采集'
                },
                 //关闭采集弹窗
                closegather(){
                    this.dialogVisible=false;
                },
                //采集产品
                async gatheritSubmits(){
                    this.$refs.gatheritForm.validate(async valid => {
                        if (!valid) return
                        let loading = this.$loading({
                            lock: true,
                            text: '数据提交中···',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });     
                        const res = await axios.post('/admin/products/dhgate', { params: this.gatherForm })
                        loading.close()
                        if (res.status !== 1) {
                            return this.$message.error(res.info);
                        }       
                        this.innerVisible=true        
                         this.dataList = res.info;
                        this.dialogVisible=false;
                        
                    })
                },
                innerVisibles(){
                    this.innerVisible=false;
                }
                                                        
            }             
        })
    </script> 


 </body> 
</html>
